<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--1、引入template.js-->
    <script type="text/javascript" src="./template.js"></script>
</head>
<body>
    <div id="container"></div>
        <!--2、创建id为template的模板-->
        <script type="text/html" id="template">
            {{if isAdmin}}
                <h1>{{title}}</h1>
                <ul>
                    <!--
                    遍历list，其中索引给i，值给value；list是由模版编译时传入上下文的属性。
                    类似于list.forEach(function(value, i){  })
                    -->
                    {{each list as value i}}
                    <li>索引{{i+1}} : {{value}}</li>
                    {{/each}}
                </ul>
            {{/if}}
        </script>

    <script>
        //3、data数据
        var data={
            title:'基本例子',
            isAdmin:true,
            list:['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
        };
        //4、template的作用就是把模板和数据拼接到一块生成一个静态的HTML片段
        //参数一: 模板id   参数二:用来渲染的数据
        var html = template('template',data);
        var con = document.querySelector("#container");
        con.innerHTML=html;
    </script>


</body>
</html>